<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <div class="login">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>注册账号</span>
            </div>
            <el-form 
            label-width="80px" 
            :model="form"
            ref="form"
            :rules="rules">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="密码"  prop="password">
                    <el-input v-model="form.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码"  prop="password2">
                    <el-input v-model="form.password2" type="password2"></el-input>
                </el-form-item>
                <el-form-item >
                    <a @click="handleLogin" class="LoginBtn">已有账号？去登录</a>
                    <el-button type="primary" @click="handleRegister('form')">注册</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import {validateEmail,validatePass} from '../utils/validate'
import {registerAPI} from '@/api/api'
import tabShow from '@/utils/TabbarShow'
export default{
    mixins: [tabShow],
    data(){

        return{
            form:{
                email:'',
                password:'',
                password2:''
            },
            rules:{
                email:[{validator:validateEmail,trigger:'blur'}],
                password:[{validator:validatePass,trigger:'blur'}],
                password2:[{validator:validatePass,trigger:'blur'}]
            }
        }
    },
    methods:{
        handleRegister(form){
            this.$refs[form].validate((valid)=>{
                if(valid){
                    console.log(this.form);
                        registerAPI(this.form).then((res)=>{
                        console.log(res);
                        if(res.data.status==200){
                           this.$message({message:res.data.message,type:'success'})
                           this.$router.push('/users/login')
                        }
                    })

                }else{
                    console.error(this.form);
                }
            })
        },
        handleLogin(){
            this.$router.push('/users/login')
        }
    }
}
</script>
<style scoped lang="scss">
.login{
    width: 100%;
    height: 100%;
    position: absolute;
    background: url('@/assets/bgregister.jpg') center content-box;

  .el-card {
      background: #65768557;
  }
  .box-card {
    width: 18.75rem;
    margin: 200px auto;
    color: #fff;
    .el-form .el-form-item__label {
        color: #fff;
    }
    .el-card__header {
      font-size: 34px;
    }
    .el-button {
      width: 100%;
    }
    .el-input {
        width:100%
    }
  }
}
</style>